import {messages} from "share/common";
import React from 'react';
import {
  Card,
  Checkbox,
  Radio,
  Input
} from 'antd';
import SelectEmployeeGroup from 'components/template/select-employee-group';
import airlineConfigService from '../airline-config.service';

class FormItemAirlineCabin extends React.Component {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      showSelectEmployeeGroup: false,
      chosenEmployeeIDs: [],
      employeeChanged: false,
      groupName: '',
      cabinControl: {
        isEnable: value.isEnable || false,
        controlType: value.controlType || 1,
        userGroupId: value.userGroupId || ''
      }
    };
  }
  componentWillReceiveProps(nextProps) {
    const { value } = nextProps;
    if (value) {
      this.setState({
        cabinControl: value
      }, () => {
        if (value.userGroupId) { this.initGroupName(); }
      });
    }
  }
  setControlType = (e) => {
    this.triggerChange({
      controlType: e.target.value
    });
  }
  setControlCabinClass = (e) => {
    this.triggerChange({
      isEnable: e.target.checked
    });
  }
  initGroupName = () => {
    airlineConfigService.getGroupNameById(this.state.cabinControl.userGroupId).then(res => {
      const groupName = res.data.name;
      if (groupName && !this.state.employeeChanged) this.setState({ groupName });
    });
  }
  showEmployGroup = () => {
    this.setState({ showSelectEmployeeGroup: true });
  }
  hideEmployGroup = () => {
    this.setState({ showSelectEmployeeGroup: false });
  }
  handleSelectEmployeeOk = (v) => {
    const { checkedEntites } = v;
    if (checkedEntites && checkedEntites.length > 0) {
      this.setState({ groupName: checkedEntites[0].name });
      this.triggerChange({userGroupId: checkedEntites[0].id});
    }
    this.setState({
      showSelectEmployeeGroup: false,
      employeeChanged: true
    });
  }
  triggerChange = (changedValue) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(Object.assign({}, this.state.cabinControl, changedValue));
    }
  }
  render = () => {
    const {
      cabinControl,
      chosenEmployeeIDs,
      groupName,
      showSelectEmployeeGroup
    } = this.state;
    return (<Card type="inner" title={this.props.title}>
      <p className="hint">{this.props.description}</p>
      <Checkbox
        style={{lineHeight: '32px'}}
        onChange={this.setControlCabinClass}
        checked={cabinControl.isEnable}>{this.props.text}</Checkbox>
      {cabinControl.isEnable && (
        <Radio.Group
          style={{display: 'inline-block', lineHeight: '32px'}}
          value={cabinControl.controlType}
          onChange={this.setControlType}>
          <Radio value={1}>{messages('supplier.key271')/*通用*/}</Radio>
          <Radio value={2}>{messages('supplier.key272')/*从人员组选择*/}</Radio>
        </Radio.Group>
      )}
      {cabinControl.isEnable &&
        cabinControl.controlType === 2 && (
          <Input
            readOnly
            value={groupName}
            style={{width: '200px'}}
            onClick={this.showEmployGroup}
          />
      )}
      <SelectEmployeeGroup
        visible={showSelectEmployeeGroup}
        onCancel={this.hideEmployGroup}
        onOk={this.handleSelectEmployeeOk}
        selectedData={chosenEmployeeIDs}
        mode="id"
        entity
      />
    </Card>);
  }
}

export default FormItemAirlineCabin;
